import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Button } from 'react-vant';
import {useNavigate} from 'react-router-dom'
import axios from '../../../utilis/index'
import { SETLIST, ALLTYPELIST, GETCHILDERLIST, CHILDERDATA,ADDLISTDATA } from '../../../types/store.d'
import '../../../pai/index'
import { Tabs } from 'react-vant';
import { userInfo } from 'os';
import { Swiper, Image } from 'react-vant';
export const images = [
    'https://img.yzcdn.cn/vant/apple-1.jpg',
    'https://img.yzcdn.cn/vant/apple-2.jpg',
    'https://img.yzcdn.cn/vant/apple-3.jpg',
    'https://img.yzcdn.cn/vant/apple-4.jpg',
    'https://img.yzcdn.cn/vant/apple-5.jpg',
    'https://img.yzcdn.cn/vant/apple-6.jpg',
    'https://img.yzcdn.cn/vant/apple-7.jpg',
    'https://img.yzcdn.cn/vant/apple-8.jpg',
];



export default function Index() {
    const dispatch = useDispatch()
    const navigate = useNavigate()

    useEffect(() => {
        axios.get('/api/list').then(res => {

            dispatch({
                type: SETLIST,
                payload: res.data.list
            })
        })
    }, [])

    const listto = useSelector((state: ALLTYPELIST) => {
        return state.list
    })
    console.log(listto);

    const cjilis = useSelector((state: ALLTYPELIST) => {
        return state.childrenlist
    })

    const handlist = (index: any) => {
        console.log(1111);
        dispatch({
            type: GETCHILDERLIST,
            payload: index
        })
    }

    const hanclidk=(item:CHILDERDATA)=>{
        console.log(1111);
        navigate(`/topour/${item.id}`,{state:item})
        console.log(item,'2222');
        dispatch({
            type:ADDLISTDATA,
            payload:item
        })
        
    }


    return (
        <div>
            <div className="demo-tabs">
                <Tabs onChange={handlist}>
                    {listto.map((item, index) => (
                        <Tabs.TabPane key={item.id} title={item.user}>
                            <div className="demo-swiper">
                                <Swiper>
                                    {images.map((image) => (
                                        <Swiper.Item key={image}>
                                            <Image lazyload src={image} />
                                        </Swiper.Item>
                                    ))}
                                </Swiper>
                            </div>
                            <div className="btn">
                                <Button type="primary">男生</Button>
                                <Button type="danger">女生</Button>
                                <Button type="info">完本</Button>
                            </div>

                            {
                                cjilis.map((item, index) => {
                                    return <p className='iout' key={index}  onClick={()=>hanclidk(item)}>
                                        <img src={item.img} alt="" />
                                        {item.user}
                                        {item.title}
                                    </p>
                                })
                            }
                        </Tabs.TabPane>
                    ))}
                </Tabs>
            </div>





        </div>
    )
}
